<template>
  <tm-app ref="app">
    <view class="maxBox" @tap="routerPushFunc">
      <view class="btnBox" 
        :style="{
          display: 'flex',
          justifyContent: 'center',
          flexDirection: 'row',
        }"
      >
        <view class="btnBackground" 
          :style="{
            background: props.background,
            width: props.width + 'rpx',
            height: props.height + 'rpx',
            borderRadius: props.radius + 'rpx'
          }">
          <image
            :src="props.iconImg"
            mode="scaleToFill"
            :style="{
              width: 34 + 'rpx',
              height: 34 + 'rpx'
            }"
          />  
        </view>
      </view>
      <view class="descFont"
      >
        {{ props.title }}
      </view>
    </view>
  </tm-app>
</template>

<script lang="ts" setup>
// 参数
// 1. 图标  2.圆角  3.宽高   4.路由跳转路径
// 5.文字  6.文字颜色  7.文字大小  8.文字行数  9.文字对齐方式
import { defineProps, defineEmits, withDefaults, watch } from "vue"
// 组件的props
const props = withDefaults(defineProps<{
  iconImg: string, //图片路径
  radius?: number, //圆角
  width?: number,   //宽
  height?: number,  //高
  background?: string, //背景色
  routerPushUrl?: string | number, //路由跳转路径
  title?: string //标题
}>(), {
  iconImg: "",
  radius: 0,
  width: 92,
  height: 92,
  background: "#006ef1",
  routerPushUrl: "/pages/index/index",
  title: "默认标题"
})
const emits = defineEmits(["click", "routerTo"])

// watch(props, (newValue) => {
//   console.log(newValue)
// })

/**@methods */
/**@description  路由跳转 */
const routerPushFunc = () => {
  if(typeof props.routerPushUrl === "string"  &&props.routerPushUrl.startsWith("/pages")) {
    uni.navigateTo({
      url: props.routerPushUrl
    })
  } else {
    emits("routerTo", props.routerPushUrl)
  }
}
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
